<template>
  <el-row>
    <el-col :span="12">
      <div v-for="(item,index) in getShopListLeft" :key="index" class="div">
        <router-link :to="{path:'/detail',query:{id:item._id}}">
          <img :src="item.img" alt />
          <p>{{item.title}}</p>
          <span>
            <em>￥</em>
            <i>{{item.price.split('.')[0]}}</i>.
            <del>{{item.price.split('.')[1]}}</del>
          </span>
        </router-link>
      </div>
    </el-col>
    <el-col :span="12">
      <div v-for="(item,index) in getShopListRight" :key="index" class="div">
        <router-link :to="{path:'/detail',query:{id:item._id}}">
          <img :src="item.img" alt />
        <p>{{item.title}}</p>
        <span>
          <em>￥</em>
          <i>{{item.price.split('.')[0]}}</i>.
          <del>{{item.price.split('.')[1]}}</del>
        </span>
        </router-link>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "ShopList",
  computed: {
    ...mapGetters(["getShopListLeft", "getShopListRight"])
  }
};
</script>

<style scoped>
.el-row {
  width: 100%;
}
.el-col .div {
  width: 90%;
  margin: 5%;
  background-color: #fff;
  border-radius: 2.6666vw 2.6666vw 0 0;
}
.el-col .div img {
  width: 100%;
  border-radius: 2.6666vw 2.6666vw 0 0;
}
.el-col .div p,
span {
  padding: 5%;
}
.el-col .div p {
  overflow: hidden;
  height: 11.8vw;
  font-size: 3.7333vw;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.el-col .div span {
  font-size: 5.3333vw;
  color: red;
}
.el-col .div span em {
  display: inline-block;
  margin-right: -1.0666vw;
  font-size: 3.7333vw;
  font-style: normal;
}
.el-col .div span i {
  font-style: normal;
}
.el-col .div span del {
  font-size: 3.2vw;
  text-decoration: none;
}
</style>